<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });
        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>

<div class="main">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                口岸数字化贸易平台
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>
    </div>
    <div class="center">
        <div class="center-left fl">
            <div class="left-top">
                <!--<h1 id="ceshi">数据可视化</h1>-->
                <div class="title">基本信息</div>
                <div class="top-list">
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;口岸数字化进出口数据平台通过实对口岸进出口货物数据进行展现，为为外贸企业、服务企业、生产企业、金融机构、保险机构、政府监管部门提供可靠的数据依据</p>
                    <ul>
                        <li>木材进口：191万m³</li>
                        <li>粮食进口：235万吨</li>
                        <li>煤炭进口：2324万吨</li>
                        <li>其他进口：3245万吨</li>
                        <li>产品出口：8925万吨</li>
                        <li>进出口额：1256万美元</li>
                    </ul>
                </div>
            </div>
            <div class="left-cen">
                <div class="title">共享商机</div>
                <ul class="company">
                    <li>俄罗斯伊尔库茨 现有木材加工厂 占地5600平米，出租或出售</li>
                    <li>俄罗斯叶卡捷琳堡 木材供应3万m³，FCA交货，价格面议；</li>
                    <li>俄罗斯克市木材货场，10万平米，5台龙门吊，有铁路专用线，出租或出售；</li>
                    <li>白俄罗斯莫吉廖夫 木材供应3.5万m³，CIF交货，价格优惠；</li>
                    <li>俄罗斯雅库茨克 煤炭供应5万吨/月，CIF交货，价格面议；</li>
                    <li>俄罗斯新西伯利亚  亚麻籽供应1万吨/月，FCA交货，价格面议；</li>
                </ul>
            </div>
            <div class="left-bottom">
                <div class="title">木材价格</div>
                <div class="bottom-b">
                    <div id="chart3" class="allnav"></div>
                </div>
            </div>
        </div>
        <div class="center-cen fl">
            <div class="cen-top">
                <div class="top-title">
                    <ul>
                        <li>
                          <p>木材发运量统计</p>
                          <span>1</span>
                          <span>9</span>
                          <span>1</span>
                          <b>万m³</b>
                        </li>
                        <li>
                          <p>同比上升</p>
                          <span>1</span>
                          <span>3</span>
                          <b>%</b>
                        </li>
                    </ul>
                </div>
                <div class="top-bottom">
                    <div id="chart1" class="allnav"></div>
                </div>
            </div>
            <div class="cen-bottom">
                <div class="title">班列</div>
                <div class="bottom-b">
                    <div id="chart4-banlie" class="allnav"></div>
                </div>

            </div>
        </div>
        <div class="center-right fr">
            <div class="right-top">
                <div class="title">各大节点城市发运量（排名）</div>
                <div class="echart wenzi">
                    <div class="gun">
                        <span>排名</span>
                        <span>城市</span>
                        <span>进口</span>
                        <span>出口</span>
                        <span>占比</span>
                    </div>
                    <div id="FontScroll" class="myscroll">
                        <ul>
                          <li>
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>1</b>
                                    </span>
                              <span>西安</span>
                              <span>1028</span>
                              <span>1028</span>
                              <span>100</span>
                            </div>
                          </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>2</b>
                                    </span>
                                    <span>成渝</span>
                                    <span>1500</span>
                                    <span>1500</span>
                                    <span>100</span>
                                </div>
                            </li>

                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>3</b>
                                    </span>
                                    <span>郑州</span>
                                    <span>658</span>
                                    <span>658</span>
                                    <span>100</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>4</b>
                                    </span>
                                    <span>齐鲁</span>
                                    <span>385</span>
                                    <span>385</span>
                                    <span>100</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>5</b>
                                    </span>
                                  <span>乌兰察布</span>
                                  <span>41</span>
                                  <span>41</span>
                                  <span>100</span>
                                </div>
                            </li>
                          <li>
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>1</b>
                                    </span>
                              <span>西安</span>
                              <span>1028</span>
                              <span>1028</span>
                              <span>100</span>
                            </div>
                          </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>2</b>
                                    </span>
                                    <span>成渝</span>
                                    <span>1500</span>
                                    <span>1500</span>
                                    <span>100</span>
                                </div>
                            </li>

                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>3</b>
                                    </span>
                                    <span>郑州</span>
                                    <span>658</span>
                                    <span>658</span>
                                    <span>100</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>4</b>
                                    </span>
                                    <span>齐鲁</span>
                                    <span>385</span>
                                    <span>385</span>
                                    <span>100</span>
                                </div>
                            </li>
                            <li>
                                <div class="fontInner clearfix">
                                    <span>
                                        <b>5</b>
                                    </span>
                                  <span>乌兰察布</span>
                                  <span>41</span>
                                  <span>41</span>
                                  <span>100</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right-cen">
                <div class="title">全年进口量</div>
                <div id="chart-jinkouliang" class="allnav"></div>
            </div>
            <div class="right-bottom">
                <div class="title">节点排名-bottom</div>
                <div class="chat">
                    <div id="chart5" class="allnav"></div>
                </div>
            </div>
        </div>
    </div>

</div>


<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/wodry.min.js" type="text/html"></script>
<script src="js/fontscroll.js"></script>
<script src="js/echarts.js"></script>

<script>
    /*$('#ceshi').wodry({
        animation: 'rotateX',
        delay: 1000,
        animationDuration: 800
    });*/
    /*window.onload = function () {
        setInterval(function () {
            var hs=document.getElementById("ceshi");
            var hstyle=hs.style.transform;
            if(hstyle=='rotateX(-360deg)'){
                //console.log(1)
                hs.style.transform='rotateX(0deg)';
                hs.style.transform='transform 500ms cubic-bezier(0.55, 0.18, 0.92, 0.46) 0s;'
            }else {
                hs.style.transform='rotateX(-360deg)';
                hs.style.transition="all 2s";
            }
        }, 5000);
    };*/
    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;
        nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum	= '0'+str;
        }else{
            realNum	= str;
        }
        return realNum;
    }
    setInterval(getTime,1000);

</script>

</body>
</html>
